<template>
  <button
    :class="{
      'ripple' : !props.disabled,
      'btn-default-box--plain': props.type === 'plain',
      'btn-primary-box': props.type === 'primary',
      'btn-danger-primary-box' : props.type === 'dangerPrimary',
      'btn-default-box': props.type === 'default',
      'btn-border-box': props.type === 'border',
      'btn-box': props.margin,
      'hl-btn': !props.row,
      'padding-felx-box': props.padding,
      'round-and-danger': props.round && props.type === 'danger',
      'round-and-primary':
        props.round && props.type === 'primary' && !props.plain && !props.block,
        'round-and-default': props.round && props.type === 'default' && !props.plain && !props.block,
        'round-and-success': props.round && props.type === 'success' && !props.plain && !props.block,
      'round-and-primary--plain':
        props.round && props.type === 'primary' && props.plain,
        'round-and-warning--plain':
        props.round && props.type === 'warning' && props.plain,
        'round-and-other--plain':
        props.round && props.type === 'other' && props.plain,
      block: props.block,
      round: props.round,
      disabled:props.disabled,
      large: props.large,
      'btn-size-mini': props.size === 'mini',
    }"
    :style="
      props.color
        ? 'background:' + props.color + ';border:1px solid ' + props.color
        : ''
    "
    :disabled="props.disabled"
    @click="clickBtn"
  >
    <span class="hl-button-span">
      <slot />
    </span>
  </button>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
interface PropsType {
  // 名称
  title?: string
  // 大小
  size?: string
  // 类型
  type?: string
  // 是否需要右边的15px间距
  margin?: boolean
  // 是否需要更改btn的上下左右间距，默认不改，需要传padding，为分数等小图标使用
  padding?: boolean
  // 是否使用栅格排列，默认否，需要传row，并配合van-row使用
  row?: boolean
  // 是否块级元素，默认否，需要传block
  block?: boolean
  // btn颜色
  color?: string
  // 是否圆形边框，默认否
  round?: boolean
  // 是否plain类型按钮，默认否
  plain?: boolean
  // 是否不可点击。，默认否
  disabled?: boolean
  // 大尺寸，默认否
  large?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
  title: '加分', // 默认值
  type: 'primary',
  margin: false,
  padding: false,
  row: false,
  block: false,
  size: 'normal',
  color: '',
  round: false,
  plain: false,
  disabled: false,
  large: false
})
interface EmitType {
  (e: 'click'): void
}
const emit = defineEmits<EmitType>()
const clickBtn = () => {
  emit('click')
}
</script>
<style lang="scss" scoped>
.hl-btn {
  padding: 10px 30px;
  border-radius: 5px;
  margin-bottom: 15px;
}
.btn-size-mini {
  padding: 2px 10px!important;
  font-size: 15px!important;
  color: #666;
}
// 全局自定义的btn
.btn-default-box--plain {
  border: 1px solid #dedede;
  background-color: #fff;
  color: #999;
}
.btn-default-box {
  border: 1px solid #f9f9f9;
  background-color: #f9f9f9;
  color: #999999;
}
.btn-primary-box {
  border: 1px solid #4ecbfb;
  background: linear-gradient(90deg, #44b3fd 0%, #4ecbfb 100%);
  color: #fff;
}
.btn-danger-primary-box {
  background: linear-gradient(90deg, #FF5B44 0%, #F87C6B 100%);
  border:1px solid #fc6954;
  color: #fff;
}
.hl-button-span {
  // font-family: Bold;
}
.btn-box {
  margin-right: 15px;
}
.padding-felx-box {
  padding: 10px 16px;
}
.ripple {
  overflow: hidden;
  position: relative;
  &:active:after {
    transform: scale(0, 0);
    opacity: 0.3;
    //设置初始状态
    transition: 0s;
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    //设置径向渐变
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
  }
}
.block {
  display: block;
  width: 100%;
}
.round {
  border-radius: 50px;
}
.disabled {
  opacity: 0.6;
}
.round-and-danger {
  padding: 5px 20px;
  color: #f77e4e;
  background: #fff2ec;
  border: 1px solid #fff2ec;
  font-size: 15px;
}
.round-and-primary--plain {
  padding: 5px 20px;
  color: #3d7fff;
  background: #ebf2ff;
  border: 1px solid #ebf2ff;
  font-size: 15px;
}
.round-and-primary {
  padding: 5px 20px;
  color: #fff;
  background: #3d7fff;
  border: 1px solid #3d7fff;
  font-size: 15px;
}
.round-and-default {
  padding: 5px 20px;
  color: #666;
  background: #f9f9f9;
  border: 1px solid #f9f9f9;
  font-size: 15px;
}
.round-and-success {
  padding: 5px 20px;
  color: #3fbd95;
  background: #e8f7f3;
  border: 1px solid #e8f7f3;
  font-size: 15px;
}
.round-and-warning--plain {
  padding: 5px 20px;
  color: #FFB422;
  background: #fff7e8;
  border: 1px solid #fff7e8;
  font-size: 15px;
}
.round-and-other--plain {
  padding: 5px 20px;
  color: #CA63E4;
  background: #faeffd;
  border: 1px solid #faeffd;
  font-size: 15px;
}
.btn-border-box {
  padding: 5px 20px;
  border: 1px solid #3d7fff;
  font-size: 15px;
  background-color: #fff;
  color: #3d7fff;
}
.large {
  padding: 7px 30px;
}
</style>
